<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <input type="text" id="search">

    <ul id="ul">
    </ul>

    <!-- <script src="https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=7540,32617,1447,32328,31660,7609,7551,32674,7621,32117,32718,32580,22160&wd=react&csor=5&pwd=reac&cb=jQuery11020893144377264335_1600176226010"></script> -->
    <script>
        window.onload = function() {
            let search =document.getElementById('search');
            let ul = document.getElementById('ul');
            search.oninput = function() {
                this.value
                let url = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=7540,32617,1447,32328,31660,7609,7551,32674,7621,32117,32718,32580,22160&wd=${this.value}&csor=5&pwd=reac&cb=jQuery110208`
                let s = document.createElement('script')
                s.src = url
                document.body.append(s)
            }
        }
        // jsonp
        // 缺点：不安全
        // 优点：兼容性好，比较便捷，天然支持跨域
        function jQuery110208 (data) {
            console.log(data)
            ul.innerHTML = ''
            for (let item of data.g) {
                ul.innerHTML += `<li>${item.q}</li>`
            }
        }
        // jQuery11020893144377264335_1600176226010({"q":"react","p":false,"g":[{"type":"sug","sa":"s_1","q":"reaction"},{"type":"sug","sa":"s_2","q":"react耐克"},{"type":"sug","sa":"s_3","q":"react什么意思"},{"type":"sug","sa":"s_4","q":"react to"},{"type":"sug","sa":"s_5","q":"react框架"},{"type":"sug","sa":"s_6","q":"reactant"},{"type":"sug","sa":"s_7","q":"react elevation"},{"type":"sug","sa":"s_8","q":"reactivity"},{"type":"sug","sa":"s_9","q":"react against"},{"type":"sug","sa":"s_10","q":"reaction to"}],"slid":"7706893942014281649","queryid":"0x3e6335175f07b1"})

    </script>
</body>
</html>